<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>友诸葛亮技能模拟器</title>
		<link rel="stylesheet" href="head.css">
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				font-family: 'Microsoft YaHei', sans-serif;
			}

			body {
				background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf4 100%);
				color: #333;
				min-height: 100vh;
				padding: 20px;
			}

			.container {
				max-width: 900px;
				margin: 0 auto;
				background: white;
				border-radius: 15px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
				padding: 25px;
				position: relative;
				overflow: hidden;
			}

			.status-bar {
				display: flex;
				justify-content: space-between;
				background: #f0f0f0;
				border-radius: 10px;
				padding: 15px;
				margin-bottom: 25px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}

			.status-item {
				text-align: center;
				flex: 1;
			}

			.status-value {
				font-size: 2rem;
				font-weight: bold;
				color: #8b0000;
			}

			.controls {
				display: flex;
				flex-wrap: wrap;
				gap: 15px;
				margin-bottom: 25px;
			}

			.btn {
				padding: 12px 20px;
				border: none;
				border-radius: 8px;
				font-size: 1.1rem;
				font-weight: bold;
				cursor: pointer;
				transition: all 0.3s ease;
				flex: 1;
				min-width: 150px;
				text-align: center;
			}

			.btn-primary {
				background: #8b0000;
				color: white;
				box-shadow: 0 4px 8px rgba(139, 0, 0, 0.3);
			}

			.btn-primary:hover {
				background: #6b0000;
				transform: translateY(-2px);
			}

			.btn-secondary {
				background: #d4af37;
				color: #333;
			}

			.btn-secondary:hover {
				background: #b8972e;
				transform: translateY(-2px);
			}

			.btn-danger {
				background: #dc3545;
				color: white;
			}

			.btn-danger:hover {
				background: #bd2130;
				transform: translateY(-2px);
			}

			.btn-fangqiu {
				background: #007bff;
				color: white;
			}

			.btn-fangqiu.used {
				background: #28a745;
			}

			.btn-fangqiu.invalid {
				background: #6c757d;
				cursor: not-allowed;
			}

			.btn:disabled {
				opacity: 0.6;
				cursor: not-allowed;
				transform: none;
			}

			.predictions-container {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
				gap: 15px;
				margin-bottom: 25px;
			}

			.prediction-card {
				background: #f8f9fa;
				border-radius: 10px;
				padding: 15px;
				text-align: center;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;
			}

			.prediction-card.hidden {
				background: #e9ecef;
			}

			.prediction-card.correct {
				background: #d4edda;
				border: 2px solid #28a745;
			}

			.prediction-card.incorrect {
				background: #f8d7da;
				border: 2px solid #dc3545;
			}

			.prediction-card.hidden .prediction-value {
				display: none;
			}

			.prediction-title {
				font-weight: bold;
				margin-bottom: 10px;
				color: #6c757d;
			}

			.prediction-value {
				font-size: 1.2rem;
				font-weight: bold;
				color: #495057;
			}

			.result-panel {
				background: #f8f9fa;
				border-radius: 10px;
				padding: 20px;
				margin-top: 25px;
				display: none;
			}

			.result-title {
				text-align: center;
				margin-bottom: 15px;
				color: #8b0000;
				font-size: 1.3rem;
			}

			.result-content {
				line-height: 1.6;
			}

			.footer {
				text-align: center;
				margin-top: 25px;
				color: #6c757d;
				font-size: 0.9rem;
			}

			.modal {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.7);
				z-index: 1000;
				justify-content: center;
				align-items: center;
			}

			.modal-content {
				background: white;
				border-radius: 15px;
				padding: 30px;
				width: 90%;
				max-width: 500px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
				position: relative;
			}

			.modal-title {
				text-align: center;
				margin-bottom: 20px;
				color: #8b0000;
				font-size: 1.5rem;
			}

			.modal-options {
				display: flex;
				flex-direction: column;
				gap: 15px;
			}

			.modal-btn {
				padding: 12px;
				border: none;
				border-radius: 8px;
				font-size: 1.1rem;
				font-weight: bold;
				cursor: pointer;
				transition: all 0.3s ease;
				text-align: center;
			}

			.close-modal {
				position: absolute;
				top: 15px;
				right: 15px;
				background: none;
				border: none;
				font-size: 1.5rem;
				cursor: pointer;
				color: #6c757d;
			}

			.progress-indicator {
				text-align: center;
				margin-bottom: 15px;
				color: #6c757d;
				font-size: 1rem;
			}

			.verification-controls {
				display: flex;
				flex-wrap: wrap;
				gap: 15px;
				justify-content: center;
				margin-bottom: 20px;
			}

			.select-group {
				flex: 1;
				min-width: 200px;
			}

			.select-group label {
				display: block;
				margin-bottom: 5px;
				font-weight: bold;
				color: #495057;
			}

			select {
				width: 100%;
				padding: 10px;
				border-radius: 5px;
				border: 1px solid #ced4da;
				font-size: 1rem;
			}

			@media (max-width: 768px) {
				.controls {
					flex-direction: column;
				}

				.btn {
					width: 100%;
				}

				.verification-controls {
					flex-direction: column;
				}

				.select-group {
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<section class="hero-section">
			<h1 class="hero-title">友诸葛亮技能标记</h1>
			<div class="tooltip-container">
				<div class="nav-buttons">
					<button class="nav-button"><a href="index.html">返回新版主页</a></button>
					<button class="nav-button"><a href="indexjd.html">返回经典版主页</a></button>
				</div>
			</div>
			<h3 class="hero-title">
				说明：<br />
				本标记网页可脱离联机版单独运行，脱离联机版运行时只会令页顶和页尾的css失效，不影响使用。<br />
				中断按钮为提前中断预测流程，但是未预测的部分会全部判错<br />
				重置为重置本网页的所有状态
			</h3>
		</section>

		<div class="container">
			<div class="status-bar">
				<div class="status-item">
					<div>当前可预测数量</div>
					<div class="status-value" id="prediction-count">3</div>
				</div>
				<div class="status-item">
					<div>方遒状态</div>
					<div class="status-value" id="fangqiu-status">未使用</div>
				</div>
				<div class="status-item">
					<div>已验证/总预测</div>
					<div class="status-value" id="verified-count">0/0</div>
				</div>
			</div>

			<div class="controls">
				<button class="btn btn-primary" id="btn-yance">发动演策</button>
				<button class="btn btn-fangqiu" id="btn-fangqiu">方遒：未使用</button>
				<button class="btn btn-secondary" id="btn-verify">验证预测</button>
				<button class="btn btn-danger" id="btn-interrupt">中断预测</button>
				<button class="btn btn-secondary" id="btn-reset">重置状态</button>
			</div>

			<div class="predictions-container" id="predictions-container">
				<!-- 预测卡片将由JS动态生成 -->
			</div>

			<div class="result-panel" id="result-panel">
				<div class="result-title">预测结果</div>
				<div class="result-content" id="result-content"></div>
			</div>
		</div>

		<!-- 方向选择模态框 -->
		<div class="modal" id="direction-modal">
			<div class="modal-content">
				<button class="close-modal">&times;</button>
				<div class="modal-title">选择预测方向</div>
				<div class="modal-options">
					<button class="modal-btn btn-primary" id="btn-type">类型（基本/锦囊/装备）</button>
					<button class="modal-btn btn-primary" id="btn-color">颜色（红色/黑色）</button>
				</div>
			</div>
		</div>

		<!-- 预测选择模态框 -->
		<div class="modal" id="prediction-modal">
			<div class="modal-content">
				<button class="close-modal">&times;</button>
				<div class="modal-title" id="prediction-modal-title">选择预测值</div>
				<div class="progress-indicator" id="prediction-progress">预测 1/3</div>
				<div class="modal-options" id="prediction-options">
					<!-- 选项由JS动态生成 -->
				</div>
			</div>
		</div>

		<!-- 方遒确认模态框 -->
		<div class="modal" id="fangqiu-modal">
			<div class="modal-content">
				<button class="close-modal">&times;</button>
				<div class="modal-title">是否发动方遒？</div>
				<div class="modal-options">
					<button class="modal-btn btn-primary" id="btn-use-fangqiu">发动方遒</button>
					<button class="modal-btn btn-secondary" id="btn-cancel-fangqiu">暂不发动</button>
				</div>
			</div>
		</div>

		<!-- 验证预测模态框 -->
		<div class="modal" id="verification-modal">
			<div class="modal-content">
				<button class="close-modal">&times;</button>
				<div class="modal-title">验证预测</div>
				<div class="progress-indicator" id="verification-progress">验证 1/3</div>
				<div class="modal-options" id="verification-options"></div>
			</div>
		</div>

		<footer class="site-footer">
			<div class="author-info">
				<p>
					作者： <a href="https://space.bilibili.com/87412647?spm_id_from=333.1007.0.0"
						target="_blank">bilibili月が綺麗ですね_</a><br />
					联系方式：<a href="mailto:3099637681@qq.com" target="_blank">3099637681@qq.com（QQ同号）</a><br />
					有什么新功能或建议欢迎骚扰（著名来意）<br />
					<a href="https://1145141919810tonny.github.io/sgsmoniqi/" target="_blank">点击此处使用GitHub Pages在线服务</a>
				</p>
			</div>
			<div class="code-update">
				<a href="https://www.bilibili.com/read/readlist/rl929858?spm_id_from=333.1387.0.0" target="_blank"
					class="bili-btn" rel="noopener noreferrer">
					[bilibili]获取更新动态
				</a>
				<a href="https://github.com/1145141919810TONNY/sgsmoniqi/" target="_blank" class="github-btn"
					rel="noopener noreferrer">
					[GitHub]获取后续代码更新
				</a>
				<a href="https://gitcode.com/TONNY114514/sgsmnq?source_module=search_project" target="_blank"
					class="gitcode-btn" rel="noopener noreferrer">
					[GitCode]获取后续代码更新(国内git)
				</a>
			</div>
			<div class="license-notice">
				<p>
					Copyright &copy; <span id="copyright-year">2025</span> bilibili 月が綺麗ですね_<br />
					Released under the
					<a href="MIT LICENSE.html" title="查看MIT许可证" class="license-link" target="_blank">
						MIT License
					</a>
				</p>
				<p class="i18n-annotation">
					(法律条款以英文版<a href="MIT LICENSE.html" target="_blank">LICENSE</a>文件为准)
				</p>
			</div>
		</footer>


		<script>
			// 全局状态
			const state = {
				predictionCount: 3,
				fangqiuStatus: '未使用', // 未使用/本轮已使用/已失效
				predictions: [],
				verified: [],
				currentDirection: null,
				currentPredictionIndex: 0,
				verificationIndex: 0,
				currentRoundFangqiuUsed: false
			};

			// DOM元素
			const elements = {
				predictionCount: document.getElementById('prediction-count'),
				fangqiuStatus: document.getElementById('fangqiu-status'),
				verifiedCount: document.getElementById('verified-count'),
				btnYance: document.getElementById('btn-yance'),
				btnFangqiu: document.getElementById('btn-fangqiu'),
				btnVerify: document.getElementById('btn-verify'),
				btnInterrupt: document.getElementById('btn-interrupt'),
				btnReset: document.getElementById('btn-reset'),
				predictionsContainer: document.getElementById('predictions-container'),
				resultPanel: document.getElementById('result-panel'),
				resultContent: document.getElementById('result-content'),
				directionModal: document.getElementById('direction-modal'),
				predictionModal: document.getElementById('prediction-modal'),
				fangqiuModal: document.getElementById('fangqiu-modal'),
				verificationModal: document.getElementById('verification-modal'),
				predictionOptions: document.getElementById('prediction-options'),
				predictionModalTitle: document.getElementById('prediction-modal-title'),
				predictionProgress: document.getElementById('prediction-progress'),
				verificationProgress: document.getElementById('verification-progress'),
				verificationTypeSelect: document.getElementById('verification-type-select'),
				verificationColorSelect: document.getElementById('verification-color-select'),
				btnConfirmVerify: document.getElementById('btn-confirm-verify'),
				btnType: document.getElementById('btn-type'),
				btnColor: document.getElementById('btn-color'),
				btnUseFangqiu: document.getElementById('btn-use-fangqiu'),
				btnCancelFangqiu: document.getElementById('btn-cancel-fangqiu')
			};

			// 初始化
			function init() {
				updateUI();
				setupEventListeners();
			}

			// 设置事件监听器
			function setupEventListeners() {
				// 按钮事件
				elements.btnYance.addEventListener('click', startYance);
				elements.btnFangqiu.addEventListener('click', toggleFangqiu);
				elements.btnVerify.addEventListener('click', startVerification);
				elements.btnInterrupt.addEventListener('click', interruptPredictions);
				elements.btnReset.addEventListener('click', resetState);

				// 模态框关闭按钮
				document.querySelectorAll('.close-modal').forEach(btn => {
					btn.addEventListener('click', () => {
						document.querySelectorAll('.modal').forEach(modal => {
							modal.style.display = 'none';
						});
					});
				});

				// 方向选择
				elements.btnType.addEventListener('click', () => selectDirection('type'));
				elements.btnColor.addEventListener('click', () => selectDirection('color'));

				// 方遒确认
				elements.btnUseFangqiu.addEventListener('click', useFangqiu);
				elements.btnCancelFangqiu.addEventListener('click', cancelFangqiu);

				// 验证确认
				elements.btnConfirmVerify.addEventListener('click', confirmVerification);
			}

			// 开始演策 - 使用Promise链式调用实现顺序弹窗
			async function startYance() {
				// 重置验证状态
				state.verified = [];
				state.verificationIndex = 0;
				state.predictions = [];
				state.currentRoundFangqiuUsed = false;

				// 若本轮未结算，禁止再次发动
				if (state.predictions.length > 0 && state.verificationIndex < state.predictions.length) {
					alert('当前演策轮次尚未结束，请先完成验证或中断预测！');
					return;
				}

				try {
					// 第一步：选择方向
					const direction = await showDirectionModal();
					state.currentDirection = direction;

					// 第二步：依次选择预测值
					for (let i = 0; i < state.predictionCount; i++) {
						const value = await showPredictionModal(direction, i);
						state.predictions.push({
							direction: direction,
							value: value
						});
					}

					// 第三步：询问是否使用方遒
					if (state.fangqiuStatus === '未使用') {
						const useFangqiu = await showFangqiuModal();
						if (useFangqiu) {
							state.fangqiuStatus = '本轮已使用';
							state.currentRoundFangqiuUsed = true;
						}
					}

					// 更新UI
					renderPredictions();
					updateUI();

				} catch (error) {
					console.log('演策流程被取消或中断');
				}
			}

			// 显示方向选择模态框
			function showDirectionModal() {
				return new Promise((resolve) => {
					elements.directionModal.style.display = 'flex';

					// 设置一次性事件监听器
					const typeHandler = () => {
						cleanup();
						resolve('type');
					};

					const colorHandler = () => {
						cleanup();
						resolve('color');
					};

					const cleanup = () => {
						elements.btnType.removeEventListener('click', typeHandler);
						elements.btnColor.removeEventListener('click', colorHandler);
						elements.directionModal.style.display = 'none';
					};

					elements.btnType.addEventListener('click', typeHandler);
					elements.btnColor.addEventListener('click', colorHandler);
				});
			}

			// 显示预测值选择模态框
			function showPredictionModal(direction, index) {
				return new Promise((resolve) => {
					elements.predictionProgress.textContent = `预测 ${index + 1}/${state.predictionCount}`;

					const options = direction === 'type' ?
						['基本牌', '锦囊牌', '装备牌'] :
						['红色', '黑色'];

					elements.predictionOptions.innerHTML = '';

					options.forEach(option => {
						const btn = document.createElement('button');
						btn.className = 'modal-btn btn-primary';
						btn.textContent = option;

						//方遒提示：如果本轮发动了方遒，显示方向提示
						if (state.currentRoundFangqiuUsed) {
							const hint = document.createElement('div');
							hint.style.fontSize = '0.85rem';
							hint.style.color = '#6c757d';
							hint.style.marginTop = '4px';
							hint.textContent = direction === 'type' ?
								'（类型：基本 / 锦囊 / 装备）' :
								'（颜色：红色 / 黑色）';
							btn.appendChild(hint);
						}

						btn.addEventListener('click', () => {
							elements.predictionModal.style.display = 'none';
							resolve(option);
						});

						elements.predictionOptions.appendChild(btn);
					});

					elements.predictionModal.style.display = 'flex';
				});
			}


			// 显示方遒确认模态框
			function showFangqiuModal() {
				return new Promise((resolve) => {
					elements.fangqiuModal.style.display = 'flex';

					// 设置一次性事件监听器
					const useHandler = () => {
						cleanup();
						resolve(true);
					};

					const cancelHandler = () => {
						cleanup();
						resolve(false);
					};

					const cleanup = () => {
						elements.btnUseFangqiu.removeEventListener('click', useHandler);
						elements.btnCancelFangqiu.removeEventListener('click', cancelHandler);
						elements.fangqiuModal.style.display = 'none';
					};

					elements.btnUseFangqiu.addEventListener('click', useHandler);
					elements.btnCancelFangqiu.addEventListener('click', cancelHandler);
				});
			}

			function startVerification() {
				if (state.predictions.length === 0) {
					alert('请先发动演策技能！');
					return;
				}
				if (state.verificationIndex >= state.predictions.length) {
					alert('所有预测已验证完毕！');
					return;
				}

				const pred = state.predictions[state.verificationIndex];
				const direction = pred.direction; // 'type' 或 'color'

				// 更新进度
				elements.verificationProgress.textContent =
					`验证 ${state.verificationIndex + 1}/${state.predictions.length}`;

				// 清空并生成按钮
				const container = document.getElementById('verification-options');
				container.innerHTML = '';

				const opts =
					direction === 'type' ?
					['基本牌', '锦囊牌', '装备牌'] :
					['红色', '黑色'];

				opts.forEach(text => {
					const btn = document.createElement('button');
					btn.className = 'modal-btn btn-primary';
					btn.textContent = text;
					btn.onclick = () => finishVerification(text);
					container.appendChild(btn);
				});

				elements.verificationModal.style.display = 'flex';
			}

			/* 用户点选后真正完成验证 */
			function finishVerification(selectedText) {
				const pred = state.predictions[state.verificationIndex];
				const isCorrect = selectedText === pred.value;

				state.verified[state.verificationIndex] = isCorrect;
				state.verificationIndex++;

				elements.verificationModal.style.display = 'none';
				renderPredictions();
				updateUI();

				if (state.verificationIndex >= state.predictions.length) {
					settlePredictions();
				}
			}

			// 选择方向
			function selectDirection(direction) {
				state.currentDirection = direction;
				elements.directionModal.style.display = 'none';
			}

			// 使用方遒
			function useFangqiu() {
				state.fangqiuStatus = '本轮已使用';
				state.currentRoundFangqiuUsed = true;
				elements.fangqiuModal.style.display = 'none';
				updateUI();
			}

			// 取消方遒
			function cancelFangqiu() {
				elements.fangqiuModal.style.display = 'none';
			}

			// 切换方遒状态
			function toggleFangqiu() {
				if (state.fangqiuStatus === '未使用') {
					alert('方遒技能尚未发动，请在演策过程中选择是否发动');
				} else if (state.fangqiuStatus === '本轮已使用') {
					alert('方遒技能已在本轮发动');
				} else {
					alert('方遒技能已失效');
				}
			}

			// 中断预测
			function interruptPredictions() {
				if (state.predictions.length === 0) {
					alert('当前没有进行中的预测！');
					return;
				}

				// 将所有未验证的预测标记为错误
				for (let i = state.verificationIndex; i < state.predictions.length; i++) {
					state.verified[i] = false;
				}
				state.verificationIndex = state.predictions.length;

				// 更新UI
				renderPredictions();

				// 结算
				settlePredictions();
			}

			// 结算预测
			function settlePredictions() {
				const correctCount = state.verified.filter(v => v).length;
				const total = state.predictions.length;
				const half = Math.ceil(total / 2);

				let resultText = `预测结果：${correctCount}正确/${total - correctCount}错误<br><br>`;

				if (correctCount === 0) {
					// 全错
					const reduction = state.fangqiuStatus === '本轮已使用' ? 2 : 1;
					state.predictionCount = Math.max(0, state.predictionCount - reduction);
					resultText += `❌ 所有预测均错误！失去1点体力。<br>可预测数量${reduction > 1 ? '减少2' : '减少1'}。`;
				} else if (correctCount < half) {
					// 正确数不足一半
					resultText += `⚠️ 正确预测不足一半！弃置两张牌。`;
				} else if (correctCount === total) {
					// 全对
					const increase = state.fangqiuStatus === '本轮已使用' ? 2 : 1;
					state.predictionCount = Math.min(7, state.predictionCount + increase);
					resultText += `✅ 所有预测均正确！摸两张牌。<br>可预测数量${increase > 1 ? '增加2' : '增加1'}。`;

					// 方遒重置条件
					if (state.fangqiuStatus === '本轮已使用' && total >= 4) {
						state.fangqiuStatus = '未使用';
						resultText += `<br>方遒技能已重置！`;
					}
				} else {
					// 至少一半正确
					resultText += `👍 正确预测至少一半！获得一张符合声明条件的牌。`;
				}

				// 如果本轮使用了方遒，结算后将其标记为已失效
				if (state.fangqiuStatus === '本轮已使用') {
					state.fangqiuStatus = '已失效';
				}

				// 重置当前轮次方遒使用状态
				state.currentRoundFangqiuUsed = false;

				// 显示结果
				elements.resultContent.innerHTML = resultText;
				elements.resultPanel.style.display = 'block';

				// 更新UI
				updateUI();
			}

			// 重置状态
			function resetState() {
				state.predictionCount = 3;
				state.fangqiuStatus = '未使用';
				state.predictions = [];
				state.verified = [];
				state.currentDirection = null;
				state.currentPredictionIndex = 0;
				state.verificationIndex = 0;
				state.currentRoundFangqiuUsed = false;

				// 重置UI
				elements.resultPanel.style.display = 'none';

				updateUI();
			}

			// 渲染预测卡片
			function renderPredictions() {
				elements.predictionsContainer.innerHTML = '';

				state.predictions.forEach((pred, index) => {
					const card = document.createElement('div');
					card.className = 'prediction-card';

					// 1. 验证过的：按正误上色
					if (index < state.verificationIndex) {
						card.classList.add(state.verified[index] ? 'correct' : 'incorrect');
					} else if (state.fangqiuStatus === '本轮已使用') {} else {
						card.classList.add('hidden');
					}

					const title = document.createElement('div');
					title.className = 'prediction-title';
					title.textContent = `预测 ${index + 1}`;

					const value = document.createElement('div');
					value.className = 'prediction-value';
					value.textContent = pred.value;

					card.appendChild(title);
					card.appendChild(value);
					elements.predictionsContainer.appendChild(card);
				});

				elements.verifiedCount.textContent = `${state.verificationIndex}/${state.predictions.length}`;
			}



			// 更新UI状态
			function updateUI() {
				// 更新状态显示
				elements.predictionCount.textContent = state.predictionCount;
				elements.fangqiuStatus.textContent = state.fangqiuStatus;

				// 更新方遒按钮
				elements.btnFangqiu.textContent = `方遒：${state.fangqiuStatus}`;

				// 如果预测未完成，禁用演策按钮
				elements.btnYance.disabled =
					state.predictions.length > 0 && state.verificationIndex < state.predictions.length;

				elements.btnInterrupt.disabled =
					state.predictions.length === 0 || // 还没开本轮
					state.verificationIndex >= state.predictions.length; // 本轮已结束


				// 根据方遒状态设置按钮样式
				elements.btnFangqiu.classList.remove('used', 'invalid');
				if (state.fangqiuStatus === '本轮已使用') {
					elements.btnFangqiu.classList.add('used');
				} else if (state.fangqiuStatus === '已失效') {
					elements.btnFangqiu.classList.add('invalid');
				}

				// 更新验证计数
				elements.verifiedCount.textContent = `${state.verificationIndex}/${state.predictions.length}`;

				// 渲染预测卡片
				renderPredictions();
			}

			// 初始化应用
			window.addEventListener('DOMContentLoaded', init);
		</script>
	</body>
</html>